<!-- 首页 -->
<template>
  <div class="home">
    <nav-bar :activeComponent="activeComponent"></nav-bar>
    <!-- 顶部轮播图 (现在是全屏的) -->
    <section class="banner-carousel fullscreen">
      <div class="carousel-container">
        <transition-group name="slide" tag="div" class="carousel-slides">
          <div v-for="(slide, index) in carouselSlides" :key="index" v-show="currentSlide === index" class="carousel-slide">
            <div class="slide-image" :style="{ backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${slide.image})` }"></div>
            <div class="slide-content">
              <h1>{{ slide.title }}</h1>
              <p>{{ slide.description }}</p>
              <button v-if="slide.buttonText" class="slide-btn" @click="scrollToDestination(slide.action)">{{ slide.buttonText }} <i class="fas fa-arrow-right"></i></button>
            </div>
          </div>
        </transition-group>

        <!-- 轮播图控制按钮 -->
        <div class="carousel-controls">
          <button class="control-btn prev" @click="prevSlide"><i class="fas fa-chevron-up"></i></button>
          <div class="carousel-indicators">
            <span
                v-for="(slide, index) in carouselSlides"
                :key="index"
                class="indicator"
                :class="{ active: currentSlide === index }"
                @click="goToSlide(index)">
            </span>
          </div>
          <button class="control-btn next" @click="nextSlide"><i class="fas fa-chevron-down"></i></button>
        </div>
      </div>
      <!-- 添加向下滚动提示 -->
      <div class="scroll-indicator" @click="scrollToDestination('destinations')">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-chevron-down"></i>
      </div>
    </section>

    <!-- 热门目的地推荐 -->
    <section id="destinations" class="section destination-section">
      <div class="section-header">
        <h2><i class="fas fa-map-marker-alt section-icon"></i> 热门景点</h2>
        <a href="/destinations" class="view-all">更多景点 <i class="fas fa-chevron-right"></i></a>
      </div>
      <div class="destination-grid" >
        <div class="destination-card" v-for="(destination, index) in destinations" :key="index" @click="goToSpotsIntro(destination.spotId)">
          <div class="card-image">
<!--            <img :src="destination.coverImage" :alt="destination.spotName" />-->
            <img :src="'http://localhost:5173/api/images/' + destination.coverImage" :alt="destination.spotName" />
            <div class="overlay">
              <span class="location-label">
                <i class="fas fa-map-marker-alt"></i>
                {{ destination.lat?.toFixed(2) }}, {{ destination.lng?.toFixed(2) }}
              </span>

            </div>
          </div>
          <div class="card-content">
            <h3>{{destination.spotName}}</h3>
            <p>{{ destination.description }}</p>
            <button class="view-details-btn">查看详情 <i class="fas fa-arrow-right"></i></button>
          </div>
        </div>
      </div>
    </section>

    <!-- 精选攻略推荐 -->
    <section id="guides" class="section guide-section">
      <div class="section-header">
        <h2><i class="fas fa-book-open section-icon"></i> 精选攻略</h2>
        <a href="/guides" class="view-all">更多攻略 <i class="fas fa-chevron-right"></i></a>
      </div>
      <div class="guide-grid" >
        <div class="guide-card" v-for="(guide, index) in guides" :key="index" @click="goToGuide(guide.guideId)">
          <div class="card-image">
            <img :src="guide.coverImage" :alt="guide.title" />
<!--            <img :src="'http://localhost:5173/api/images/' + guide.coverImage" :alt="guide.title" />-->
            <span class="guide-badge">精选</span>
          </div>
          <div class="card-content">
            <h3>{{ guide.title }}</h3>
            <p>{{ guide.destination }}</p>
            <div class="meta">
              <div class="author">
                <i class="fas fa-user-circle"></i>
                <span>{{ guide.user?.userName }}</span>
              </div>
              <div class="date">
                <i class="far fa-calendar-alt"></i>
                <span>{{ guide.createTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 用户游记展示 -->
    <section id="travelogues" class="section travelogue-section">
      <div class="section-header">
        <h2><i class="fas fa-pen-fancy section-icon"></i> 用户游记</h2>
        <a href="/travelogues" class="view-all">更多游记 <i class="fas fa-chevron-right"></i></a>
      </div>
      <div class="travelogue-grid">
        <div class="travelogue-card" v-for="(travelogue, index) in travelogues" :key="index" @click="goToTravelogue(travelogue.travelogueId)">
          <div class="card-image">
<!--            <img :src="travelogue.image" :alt="travelogue.title" />-->
            <img :src="'http://localhost:5173/api/images/' + travelogue.image" :alt="travelogue.title" />
          </div>
          <div class="card-content">
            <h3>{{ travelogue.title }}</h3>
            <p>{{ travelogue.summary }}</p>
            <div class="meta">
              <div class="user-info">
                <img :src="travelogue.avatar" :alt="travelogue.author" class="avatar" />
                <span class="author-name">{{ travelogue.author }}</span>
              </div>
              <div class="stats">
                <span class="likes"><i class="far fa-heart"></i> {{ travelogue.likes }}</span>
                <span class="comments"><i class="far fa-comment"></i> {{ travelogue.comments }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部 Footer -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-col">
          <div class="footer-logo">
            <img src="path/to/logo.png" alt="Website Logo" />
          </div>
          <p class="footer-desc">探索世界的美好，记录旅行的感动，分享最实用的旅游攻略</p>
        </div>
        <div class="footer-col">
          <h4>网站导航</h4>
          <ul>
            <li><a href="/"><i class="fas fa-home"></i> 首页</a></li>
            <li><a href="#destinations" @click.prevent="scrollToElement('destinations')"><i class="fas fa-map-marker-alt"></i> 目的地</a></li>
            <li><a href="#guides" @click.prevent="scrollToElement('guides')"><i class="fas fa-book-open"></i> 攻略</a></li>
            <li><a href="#travelogues" @click.prevent="scrollToElement('travelogues')"><i class="fas fa-pen-fancy"></i> 游记</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>关于我们</h4>
          <ul>
            <li><a href="/about"><i class="fas fa-info-circle"></i> 关于我们</a></li>
            <li><a href="/contact"><i class="fas fa-envelope"></i> 联系我们</a></li>
            <li><a href="/privacy"><i class="fas fa-shield-alt"></i> 隐私政策</a></li>
            <li><a href="/terms"><i class="fas fa-file-alt"></i> 使用条款</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>关注我们</h4>
          <div class="social-media">
            <a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
            <a href="#" class="social-link"><i class="fab fa-weibo"></i></a>
            <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
            <a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
          </div>
          <div class="newsletter">
            <h4>订阅最新资讯</h4>
            <div class="newsletter-form">
              <input type="email" placeholder="请输入您的邮箱" />
              <button><i class="fas fa-paper-plane"></i></button>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright">
        &copy; 2025 旅游攻略网. 保留所有权利。
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import NavBar from "@/components/NavBar.vue";
import { updateHomeShow, updateDestinations, updateGuides, updateTravelogues } from "@/api/home.js";

const router = useRouter();

const activeComponent = ref("home");

// 轮播图数据
let carouselSlides = reactive([
  {
    title: "探索世界，发现美好",
    description: "从城市到自然，从美食到文化，开启你的旅行之旅",
    image: "path/to/banner1.jpg",
    buttonText: "开启探索",
    action: "destinations",
  },
  {
    title: "日本樱花季",
    description: "春季限定，感受浪漫樱花飞舞的绝美景色",
    image: "path/to/banner2.jpg",
    buttonText: "查看攻略",
    action: "guides",
  },
]);

const currentSlide = ref(0);
let autoSlideTimer = null;

// 热门目的地数据
const destinations = reactive([]);
const guides = reactive([]);
const travelogues = reactive([]);

// 获取数据
const getHomeShow = () => {
  updateHomeShow()
      .then((res) => {
        carouselSlides=res.data;
      })
      .catch((error) => {
        console.error("Error fetching home show data:", error);
      });
};

const getDestinations = (length) => {
  updateDestinations(length)
      .then((res) => {
        destinations.splice(0, destinations.length, ...res.data);
        console.log("Destinations Data:", res.data);
      })
      .catch((error) => {
        console.error("Error fetching destinations data:", error);
      });
};

const getGuides = (length) => {
  updateGuides(length)
      .then((res) => {
        guides.splice(0, guides.length, ...res.data);
        console.log("Guides Data:", res.data);
      })
      .catch((error) => {
        console.error("Error fetching guides data:", error);
      });
};

const getTravelogues = (length) => {
  updateTravelogues(length)
      .then((res) => {
        travelogues.splice(0, travelogues.length, ...res.data);
        console.log("Travelogues Data:", res.data);
      })
      .catch((error) => {
        console.error("Error fetching travelogues data:", error);
      });
};

// 页面跳转
const goToSpotsIntro = (t) => {
  router.push({ path: "/spotsIntro" ,query: { id: t } });
};
const goToGuide = (t) => {
  router.push({ path: "/travelGuidePage" ,query: { id: t } });
};

const goToTravelogue = (t) => {
  router.push({ path: "/travelBlogPage" ,query: { id: t } });
};


// 轮播图功能
const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % carouselSlides.length;
  resetAutoSlide();
};

const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + carouselSlides.length) % carouselSlides.length;
  resetAutoSlide();
};

const goToSlide = (index) => {
  currentSlide.value = index;
  resetAutoSlide();
};

const startAutoSlide = () => {
  autoSlideTimer = setInterval(() => {
    nextSlide();
  }, 5000);
};

const stopAutoSlide = () => {
  clearInterval(autoSlideTimer);
};

const resetAutoSlide = () => {
  stopAutoSlide();
  startAutoSlide();
};

// 平滑滚动
const scrollToElement = (elementId) => {
  const element = document.getElementById(elementId);
  if (element) {
    element.scrollIntoView({ behavior: "smooth", block: "start" });
  }
};

const scrollToDestination = (action) => {
  if (action) {
    scrollToElement(action);
  }
};

// 设置平滑滚动
const setupSmoothScrolling = () => {
  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
    anchor.addEventListener("click", function (e) {
      e.preventDefault();
      const targetId = this.getAttribute("href").substring(1);
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    });
  });
};

// 组件挂载时执行
onMounted(() => {
  getHomeShow();
  getDestinations(4);
  getGuides(4);
  getTravelogues(4);
  startAutoSlide();
  setupSmoothScrolling();
});

// 组件卸载时执行
onBeforeUnmount(() => {
  stopAutoSlide();
});
</script>
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.home {
  font-family: 'Noto Sans SC', sans-serif;
  color: #3a3a3a;
  background-color: #f5f7fa;
}

/* 轮播图样式 - 修改为全屏 */
.banner-carousel {
  position: relative;
  height: 550px;
  overflow: hidden;
  color: white;
  text-align: center;
}

/* 全屏轮播图 */
.banner-carousel.fullscreen {
  height: 90vh; /* 使用视口高度单位，让轮播图占满整个屏幕 */
  min-height: 600px; /* 设置最小高度，确保在小屏幕上有足够的空间 */
}

.carousel-container {
  position: relative;
  height: 100%;
}

.carousel-slides {
  height: 100%;
  position: relative;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.8s ease;
}

.carousel-slide:hover .slide-image {
  transform: scale(1.05);
}

.slide-content {
  max-width: 800px;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.slide-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInDown 0.8s forwards;
  animation-delay: 0.2s;
}

.slide-content p {
  font-size: 1.3rem;
  font-weight: 300;
  margin-bottom: 30px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInDown 0.8s forwards;
  animation-delay: 0.4s;
}

.slide-btn {
  background-color: #0e9aa7;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.8s forwards;
  animation-delay: 0.6s;
}

.slide-btn:hover {
  background-color: #057885;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(14, 154, 167, 0.4);
}

/* 添加向下滚动提示 */
.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  cursor: pointer;
  z-index: 5;
  animation: bounce 2s infinite;
}

.scroll-indicator span {
  margin-bottom: 5px;
  font-size: 0.9rem;
  font-weight: 300;
}

.scroll-indicator i {
  font-size: 1.2rem;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.carousel-controls {
  position: absolute;
  right: 30px; /* 将控制按钮放到右侧 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直居中 */
  display: flex;
  flex-direction: column; /* 竖直排列 */
  align-items: center;
  gap: 10px; /* 控制按钮之间的间距 */
  z-index: 2;
}


.control-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 10px;
  transition: all 0.3s ease;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.carousel-indicators {
  display: flex;
  flex-direction: column; /* 小圆点竖直排列 */
  gap: 10px; /* 小圆点之间的间距 */
  margin: 10px 0; /* 调整上下间距 */
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background-color: #0e9aa7;
  transform: scale(1.2);
}

.indicator:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.banner-search {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  z-index: 3;
}

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  background-color: white;
  border-radius: 24px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  padding: 5px;
}

.search-icon {
  color: #8a8a8a;
  position: absolute;
  left: 15px;
}

.search-box input {
  flex: 1;
  padding: 12px 12px 12px 40px;
  border: none;
  font-size: 1rem;
  border-radius: 24px;
  outline: none;
}

.search-box button {
  padding: 12px 24px;
  background-color: #0e9aa7;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-box button:hover {
  background-color: #057885;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(14, 154, 167, 0.3);
}

/* 轮播图过渡动画 */
.slide-enter-active, .slide-leave-active {
  transition: all 0.8s ease;
}

.slide-enter-from {
  opacity: 0;
  transform: translateX(50px);
}

.slide-leave-to {
  opacity: 0;
  transform: translateX(-50px);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 通用部分样式 */
.section {
  padding: 60px 5%;
  max-width: 1400px;
  margin: 0 auto;
  scroll-margin-top: 60px; /* 确保锚点跳转时有足够的顶部空间 */
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.section-header h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  color: #0e9aa7;
}

.view-all {
  color: #0e9aa7;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.view-all:hover {
  background-color: rgba(14, 154, 167, 0.1);
  transform: translateX(3px);
}

/* 卡片通用样式 */
.destination-grid,
.guide-grid,
.travelogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
}

.destination-card,
.guide-card,
.travelogue-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.destination-card:hover,
.guide-card:hover,
.travelogue-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.destination-card:hover .card-image img,
.guide-card:hover .card-image img,
.travelogue-card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1a1a1a;
}

.card-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
}

/* 热门目的地卡片特殊样式 */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 20px;
  color: white;
}

.location-label {
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.view-details-btn {
  background-color: #0e9aa7;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: auto;
}

.view-details-btn:hover {
  background-color: #057885;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(14, 154, 167, 0.2);
}

/* 精选攻略卡片特殊样式 */
.guide-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #0e9aa7;
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.guide-card .meta,
.travelogue-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  margin-top: auto;
  border-top: 1px solid #eee;
}

.guide-card .author,
.guide-card .date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 0.9rem;
}

/* 用户游记卡片特殊样式 */
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0e9aa7;
}

.author-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1a1a1a;
}

.stats {
  display: flex;
  gap: 15px;
}

.likes,
.comments {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 0.9rem;
}

/* Footer 样式 */
.footer {
  background-color: #1a1a1a;
  color: white;
  padding: 60px 5% 30px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-col h4 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
  color: white;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: #0e9aa7;
}

.footer-logo img {
  height: 45px;
  margin-bottom: 15px;
}

.footer-desc {
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col ul li a {
  color: #ccc;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.footer-col ul li a:hover {
  color: #0e9aa7;
  transform: translateX(5px);
}

.social-media {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #333;
  color: white;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: #0e9aa7;
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(14, 154, 167, 0.3);
}

.newsletter-form {
  display: flex;
  margin-top: 15px;
}

.newsletter-form input {
  flex: 1;
  padding: 10px 15px;
  border: none;
  border-radius: 20px 0 0 20px;
  background-color: #333;
  color: white;
  outline: none;
}

.newsletter-form button {
  padding: 10px 15px;
  background-color: #0e9aa7;
  color: white;
  border: none;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-form button:hover {
  background-color: #057885;
}

.copyright {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #333;
  color: #999;
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .slide-content h1 {
    font-size: 2.3rem;
  }

  .slide-content p {
    font-size: 1.1rem;
  }

  .section {
    padding: 40px 20px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .destination-grid,
  .guide-grid,
  .travelogue-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
</style>